<template>
  <div class="left-silder">
    <div
      :class="
        LeftHooks.leftHooksData.currentIndex === ''
          ? 'active left-silder-submenu'
          : 'left-silder-submenu'
      "
      @click="LeftHooks.handleSubmenuClick"
    >
      <div class="left-silder-submenu-title">
        <div @click="LeftHooks.handleAllEyeClick">
          <i
            :class="
              LeftHooks.leftHooksData.submenuTitleEyesVisibile
                ? 'iconfont icon-biyan1'
                : 'iconfont icon-biyan'
            "
          />
        </div>
        <span>{{ type !== "mp4" ? "病灶列表" : "帧段列表" }}</span>
      </div>
      <div class="left-silder-submenu-icon">
        <i
          :class="
            LeftHooks.leftHooksData.submenuVisibile
              ? 'iconfont icon-xiala'
              : 'iconfont icon-shouqi'
          "
          style="font-size: 7px"
        ></i>
      </div>
    </div>
    <div
      class="left-silder-submenu-item"
      :style="{ display: LeftHooks.leftHooksData.menuItemVisibile ? 'none' : 'block' }"
    ></div>
    <ul
      class="left-silder-submenu-item"
      :style="{ display: LeftHooks.leftHooksData.menuItemVisibile ? 'block' : 'none' }"
    >
      <LesionContainer
        v-bind="{
          ...$attrs,
          ...props,
          list: currentList,
        }"
        @update:activeKey="handleGetKey"
      />
    </ul>
    <div class="left-silder-bottom-tip">
      <div class="left-silder-bottom-tip-title" v-if="type !== 'mp4'">
        <span class="left-silder-bottom-tip-title-circle"></span>
        <span class="left-silder-bottom-tip-title-content">小提示</span>
      </div>
      <div class="left-silder-bottom-tip-content">
        <div>
          <div v-for="(item, index) in lesionTips" :key="index">
            <span v-if="type !== 'mp4'">{{ item }}</span>
            <span v-else>{{ item }}{{ lesionNum }}</span>
            <!-- <span v-else>
              {{ item
              }}<span v-if="item === '病灶标记：'">{{
                LeftHooks.leftHooksData.lesionNum
              }}</span>
              <span v-else>{{ LeftHooks.leftHooksData.layerNum }}</span>
            </span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { inject, computed, ref } from "vue";
import * as Store from "@/store";
// import LesionItem from "./components/LesionItem.vue";
import LesionContainer from "./components/LesionContainer.vue";
// import type { LesionItem } from "@/store/modules/filmRead/type";

interface Prop {
  type: string;
  isEye: boolean;
  isColor: boolean;
  isDel: boolean;
  isTips: boolean;
  disabled: boolean;
  pageType: string;
  lesionTips: string[];
  LeftHooks: Left.LeftHooks;
}
const props = defineProps<Prop>();
const FilmRead = Store.useFilmRead();
const isCreate = inject<boolean>("isCreate");
const isQuery = inject<boolean>("isQuery");
const isEdit = inject<boolean>("isEdit");
const emitKey = ref(1);
// 通过计算属性控制当前模式的病灶数据集合
const currentList = computed(() => {
  if (props.type === "mp4") {
    // 超声视频
    return FilmRead.dictionaryData.frameList;
  } else {
    // 大图或mpr
    return FilmRead.dictionaryData.lesionDataList;
  }
});
// 实时计算当前病灶数量
const lesionNum = computed(() => {
  let num = 0;
  if (emitKey.value === 1) {
    for (const key in FilmRead.dictionaryData.lesionDataList) {
      if (//?
        Object.prototype.hasOwnProperty.call(FilmRead.dictionaryData.lesionDataList, key)
      ) {
        if (+key !== 0) {
          const element = FilmRead.dictionaryData.lesionDataList[key];
          num += element.length;
        }
      }
    }
  } else {//单帧列表病灶个数：lesionDataList的Key为0时是单帧
    FilmRead.dictionaryData.lesionDataList
    && FilmRead.dictionaryData.lesionDataList[0]
    && (num = FilmRead.dictionaryData.lesionDataList[0].length);
  }
  return num;
});
// 获取当前超声视频的key
const handleGetKey = (key: number) => {
  emitKey.value = key;
};
</script>

<style lang="less" scoped>
.left-silder {
  min-width: 180px;
  max-width: 180px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
  display: flex;
  flex-direction: column;
  &-submenu {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    color: #ccc;
    &-title {
      font-weight: 400;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      span {
        margin-left: 6px;
        font-weight: 400;
        font-size: 14px;
        user-select: none;
      }
    }
  }
  &-submenu.active,
  &-submenu-item-li.active {
    // color: #FFF;
    color: #13fffb;
    background-color: #28353c;
  }
  &-submenu:hover {
    cursor: pointer;
  }
  &-submenu-item {
    margin: 0;
    padding: 0;
    // flex: 9;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    &-li {
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #000;
    }
    &-li:hover {
      background-color: #28353c;
      color: #fff;
      cursor: pointer;
    }
    &-title {
      width: 70%;
      font-weight: 400;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      &-content {
        margin-left: 6px;
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    &-icon {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: 8px;
      &-color {
        width: 10px;
        height: 10px;
        margin-right: 10px;
        margin-top: 2px;
        :deep(.el-color-picker--small) {
          height: 10px;
          .el-color-picker__trigger {
            width: 10px;
            height: 10px;
            margin-right: 10px;
            display: block;
            border: 0;
            opacity: 0;
          }
        }
      }

      &-color:hover,
      &-del:hover {
        cursor: pointer;
      }
      &-del:hover {
        color: #67c9d5;
      }
      &-del {
        .iconfont {
          font-size: 12px;
        }
      }
    }
  }
  // &-submenu-item::-webkit-scrollbar-track {
  //   background-color: #f5f5f5;
  //   --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  // }
  // &-submenu-item::-webkit-scrollbar {
  //   width: 6px;
  //   background-color: rgba(40, 49, 66, 0.6);
  // }
  // &-submenu-item::-webkit-scrollbar-thumb {
  //   background-color: #8b8b8b;
  //   border-radius: 10px;
  // }
  &-bottom-tip {
    // flex: 1;
    padding: 12px;
    border-top: 1px solid #000;
    height: 132px;
    min-height: 132px;
    max-height: 132px;
    &-title {
      display: flex;
      align-items: center;
      &-circle {
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #f7bc5a;
        border-radius: 50%;
      }
      &-content {
        font-weight: 400;
        font-size: 12px;
        color: #f7bc5a;
        margin-left: 4px;
      }
    }
    &-content {
      margin-top: 4px;
      font-weight: 400;
      font-size: 12px;
      line-height: 22px;
      color: #ccc;
    }
  }
}
</style>
